<script setup lang="ts">

</script>
    
<template>
    <div class="container">
        <div class="card" v-for="i in 4">
            <img src="https://codelover.club/stutasks/userID_58/currNo_11/taskID_224/FshBmTI2oJD2CJbWQzvNWGW5iVHC.jpg"
                alt="">
            <div class="content">
                <h3 class="title">智能制造学院</h3>
                <p class="copy">这是一个让大家受益的学习平台</p>
                <button class="button">了解更多</button>
            </div>
        </div>
    </div>
</template>
    
<style scoped lang="scss">
.container {
    width: 100%;
    margin-top: 100px;
    @include flex(center);

    .card {
        position: relative;
        margin: 0 20px;
        width: 200px;
        height: 300px;
        border-radius: 5px;
        overflow: hidden;
        color: #ffffff;

        img {
            width: 100%;
            height: 100%;
        }

        .content {
            position: absolute;
            padding: 10px;
            @include flex-column(center);
            bottom: -100px;
            transition-duration: 0.5s;
        }
    }

    .card:hover .content {

        transform: translateY(-150px);

    }

    .card:hover img {

        // transform: translateY(-10px);

    }

}
</style>